<script setup>
    import {useCategorySub} from './composables/useCategorySub'
    import {useGoodList} from './composables/useGoodList'
    // 面包屑数据
    const {categoryData} = useCategorySub()

    // 筛选商品数据
    const {goodList,tabChange, load, data, disabled} = useGoodList()

    import GoodsItem from '@/views/Home/components/GoodsItem.vue'
    

    

</script>


<template>
    <div class="container">
        <!-- 面包屑 -->
        <div class="bread">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="`/layout/category/${categoryData.parentId}`">{{categoryData.parentName}}</el-breadcrumb-item>
                <el-breadcrumb>{{categoryData.name}}</el-breadcrumb>
            </el-breadcrumb>
        </div>
        <div class="sub-container">
            <el-tabs v-model="data.sortField" @tab-change="tabChange">
                <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
                <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
                <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
            </el-tabs>
            <div class="goods" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
                <goods-item v-for="item in goodList" :key="item.id" :good="item"></goods-item>
            </div>
        </div>
    </div>
</template>


<style scoped lang='scss'>
    .container{
        .bread{
            padding: 25px 0;
            color: #666;
        }
        .sub-container{
            padding: 20px 10px;
            background: #fff;
            .goods{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
        }
    }
</style>